<div class="cust-form">
  <form class="form-main" [formGroup]="formData">
    <div class="sub-title">
      <img src="assets/images/business/dyForm/one.svg" alt="">
      <span>基本信息</span>
    </div>

    <div class="form-ipt">
      <nz-form-label nzRequired [nzNoColon]="true">用户编号</nz-form-label>
      <nz-form-control>
        <nz-select
          nzShowSearch
          nzAllowClear
          nzPlaceHolder="选择用户编号"
          formControlName="userCode"
          (ngModelChange)="onUserCodeChange($event)"
        >
          <nz-option 
            *ngFor="let item of userCodeList; let i = index" 
              [nzLabel]="item.usageCode" [nzValue]="item.usageCode">
          </nz-option>
        </nz-select>
        <app-err-msg *ngIf="formData.get('userCode')?.touched && formData.get('userCode')?.invalid && formData.get('userCode')?.errors"
          errMsg="请选择用户编号"
        ></app-err-msg>
      </nz-form-control>
    </div>

    <div class="form-ipt">
      <nz-form-label [nzNoColon]="true" class="PingFangSC-Regular-14">联系人姓名</nz-form-label>
      <nz-form-control>
        <input 
          formControlName="contact" 
          nz-input placeholder="联系人姓名" />
        
        <app-err-msg *ngIf="formData.get('contact')?.touched && formData.get('contact')?.invalid && formData.get('contact')?.errors"
          errMsg="校验失败"
        ></app-err-msg>
      </nz-form-control>
    </div>

    <div class="form-ipt">
      <nz-form-label [nzNoColon]="true" class="PingFangSC-Regular-14">地址</nz-form-label>
      <nz-form-control>
        <input 
          formControlName="userAddr" 
          nz-input placeholder="地址" />
      </nz-form-control>
    </div>

    <div class="form-ipt">
      <nz-form-label [nzNoColon]="true" class="PingFangSC-Regular-14">联系电话</nz-form-label>
      <nz-form-control>
        <input 
          formControlName="contactTel" 
          nz-input placeholder="联系电话" />

        <ng-container *ngIf="formData.get('contactTel')?.touched && formData.get('contactTel')?.invalid && formData.get('contactTel')?.errors">
          <app-err-msg *ngIf="formData.get('contactTel')?.errors?.['required']"
            errMsg="联系电话不能为空"
          ></app-err-msg>
          <app-err-msg *ngIf="formData.get('contactTel')?.errors?.['pattern']"
            errMsg="联系电话格式不正确"
          ></app-err-msg>
        </ng-container>
      </nz-form-control>
    </div>

    <div class="form-ipt">
      <span class="require-span"></span>
      <nz-form-label [nzNoColon]="true" class="PingFangSC-Regular-14">证件编号</nz-form-label>
      <nz-form-control>
        <input 
          formControlName="certificateNumber" 
          nz-input placeholder="证件编号" />
        <app-err-msg *ngIf="formData.get('certificateNumber')?.touched && formData.get('certificateNumber')?.invalid && formData.get('certificateNumber')?.errors"
          errMsg="证件编号不能为空"
        ></app-err-msg>
      </nz-form-control>
    </div>

    <app-file-upload style="width: 100%" 
      (uploadBack)="uploadBack($event, formData.get('certificateFile1'))" 
      [title]="'身份证明文件(必填)'"
      subTitle="请上传png, jpg, gif, jpeg, bmp格式的图片,最多可上传 2 张,每张图片大小不超过 10 M"
      popInfo="上传与证件编号一致得文件(身份证正反面/军官证/回乡证/护照原件)"
      [mediaType]="['png', 'jpg', 'gif', 'jpeg', 'pdf', 'bmp']"
      [required]="'true'"
      [previewIdStr]="formData.get('certificateFile1')?.value"
      [uploadAvailable]="uploadAvailable"
      [deleteAvailable]="uploadAvailable"
      [fileNum]="2"
      [errMsg]="(formData.get('certificateFile1')?.touched && formData.get('certificateFile1')?.invalid) ? '请上传 身份证明文件' : ''"
    >
    </app-file-upload>

  </form>

  <form class="form-main" [formGroup]="formData">
    <div class="sub-title">
      <img src="assets/images/business/dyForm/one.svg" alt="">
      <span>用水人信息</span>
    </div>

    <div class="form-ipt form-ipt-1">
      <nz-form-label [nzNoColon]="true" class="PingFangSC-Regular-14">用水人数</nz-form-label>
      <nz-form-control>
        <nz-input-number formControlName="personNum" [nzMin]="1" [nzMax]="10" [nzStep]="1" (ngModelChange)="onPersonNumChange($event)"></nz-input-number>
      </nz-form-control>
    </div>

    <ng-container formArrayName="detailList">
      <ng-container *ngFor="let item of detailList.controls; let i = index" [formGroupName]="i">
        <nz-divider nzOrientation="left" nzDashed [nzText]="text">
          <ng-template #text>用水人 {{ i + 1 }} 
            <i *ngIf="!isPreview" nz-icon nzType="minus-circle" nzTheme="outline" style="font-size: 16px; color: #02ADBC;cursor: pointer;"
              (click)="deletePerson(i)"
            ></i>
          </ng-template>
        </nz-divider>
        
        <div class="form-ipt">
          <nz-form-label [nzNoColon]="true" class="PingFangSC-Regular-14">姓名</nz-form-label>
          <nz-form-control>
            <input 
              formControlName="name" 
              nz-input placeholder="用水人姓名" />
            <app-err-msg *ngIf="item.get('name')?.touched && item.get('name')?.invalid"
              errMsg="检验失败"
            ></app-err-msg>
          </nz-form-control>
        </div>

        <div class="form-ipt">
          <nz-form-label [nzNoColon]="true">户主关系</nz-form-label>
          <nz-form-control>
            <nz-select
              nzShowSearch
              nzAllowClear
              nzPlaceHolder="选择户主关系"
              formControlName="relation"
            >
              <nz-option 
                *ngFor="let item of relationList; let i = index" 
                  [nzLabel]="item.name" [nzValue]="item.name">
              </nz-option>
            </nz-select>
            <app-err-msg *ngIf="item.get('relation')?.touched && item.get('relation')?.invalid"
              errMsg="户主关系不能为空"
            ></app-err-msg>
          </nz-form-control>
        </div>

        <div class="form-ipt">
          <nz-form-label [nzNoColon]="true">证件类型</nz-form-label>
          <nz-form-control>
            <nz-select
              nzShowSearch
              nzAllowClear
              nzPlaceHolder="选择证件类型"
              formControlName="certificateType"
              (ngModelChange)="onCertificateTypeChange($event, item)"
            >
              <nz-option 
                *ngFor="let item of certificateTypeList; let i = index" 
                  [nzLabel]="item.sclvalue" [nzValue]="item.sclvalue">
              </nz-option>
            </nz-select>
            <app-err-msg *ngIf="item.get('certificateType')?.touched && item.get('certificateType')?.invalid"
              errMsg="证件类型不能为空"
            ></app-err-msg>
          </nz-form-control>
        </div>

        <div class="form-ipt">
          <nz-form-label [nzNoColon]="true" class="PingFangSC-Regular-14">证件编号</nz-form-label>
          <nz-form-control>
            <input 
              formControlName="certificateNumber" 
              nz-input placeholder="用水人证件编号" />
            <ng-container *ngIf="item.get('certificateNumber')?.touched && item.get('certificateNumber')?.invalid">
              <app-err-msg *ngIf="item.get('certificateNumber')?.errors?.['required']"
                errMsg="用水人证件编号不能为空"
              ></app-err-msg>
              <app-err-msg *ngIf="item.get('certificateNumber')?.errors?.['pattern']"
                errMsg="居民身份证 证件编号格式不正确"
              ></app-err-msg>
            </ng-container>
          </nz-form-control>
        </div>

        <app-file-upload style="width: 100%;" 
          (uploadBack)="uploadBack($event, item.get('certificateFile1'))" 
          [title]="'身份证明文件(必填)'"
          subTitle="请上传png, jpg, gif, jpeg, bmp格式的图片,最多可上传 2 张,每张图片大小不超过 10 M"
          popInfo="上传与证件编号一致得文件(身份证正反面/军官证/回乡证/护照原件)"
          [mediaType]="['png', 'jpg', 'gif', 'jpeg', 'pdf', 'bmp']"
          [required]="'true'"
          [previewIdStr]="item.get('certificateFile1')?.value"
          [uploadAvailable]="uploadAvailable"
          [deleteAvailable]="uploadAvailable"
          [fileNum]="2"
          [errMsg]="(item.get('certificateFile1')?.touched && item.get('certificateFile1')?.invalid)?'请上传 身份证明文件' : ''"
        >
        </app-file-upload>


      </ng-container>

    </ng-container>
  </form>

  <div class="submit-btn">
    <div class="notPreview">
      <ng-container *ngIf="!isPreview">
        <button [nzLoading]="btnLoading" type="button" nz-button nzType="default" (click)=onReset()>取消</button>
        <button [nzLoading]="btnLoading" type="button" nz-button nzType="primary" (click)="onSubmit()">提交</button>
      </ng-container>
      <button *ngIf="isPreview" type="button" nz-button nzType="default" (click)="onBack()">返回</button>
    </div>
  </div>
</div>
